 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>书评管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css">
	<!-- 引入 Element UI 样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>

<div id="app">

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>书评管理</legend>
	</fieldset>
	<div class = "admin-form">
		<el-form :inline="true" :model="form" class="demo-form-inline" style="margin-left: 100px;">
			<el-form-item label="用户"   >
				<el-select v-model="form.userId" placeholder="请选择">
					<el-option
							v-for="item in user"
							:key="item.userId"
							:label="item.username"
							:value="item.userId">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="小说书名">
				<el-select v-model="form.novelId" placeholder="请选择">
					<el-option
							v-for="item in novel"
							:key="item.novelId"
							:label="item.title"
							:value="item.novelId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="类型">
				<el-select v-model="form.reply" placeholder="请选择">
					<el-option
							v-for="rep in reply"
							:key="rep.value"
							:label="rep.label"
							:value="rep.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
	</div>


	<div class="admin-table">
		<template>
			<el-table
					:data="tableData"
					border
					style="width: 800px; margin-left: 100px; ">
				<el-table-column
						fixed
						prop="commentId"
						label="ID"
						width="80" >
				</el-table-column>


				<el-table-column
						prop="commentTime"
						label="发表时间"
						width="100">

				</el-table-column>

				<el-table-column
						prop="content"
						label="书评内容"
						width="500">

				</el-table-column>


				<el-table-column
						fixed="right"
						label="操作"
						width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
						<el-button @click="dlt(scope.row)" type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>



</div>


<!-- 引入 Vue.js 和 Element UI 的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<script>

	var v = new Vue({
		el: '#app',
		data(){
			return {
				form: {
					userId: '',
					novelId: '',
					reply: '',
				},
				reply: [{value: 1, label: '书评'},{value: 2, label: '回复'}],
				user: [],
				novel: [],
				tableData: [{
				    commentId: '',
					commentTime: '',
					content: '',
				}],

			}
		},
		methods: {
			// 查询所有
			select(){
				axios.post('comment/select').then(res => {
					this.tableData = res.data;
				});
			},
			// 条件查询
			onSubmit(){
				axios.post('comment/selectlist', this.form).then(res => {
					this.tableData = res.data;
				});
			}

		},
		mounted() {
			axios.get('user/selectUser').then(res => {
				this.user = res.data;

			});
			axios.get('novel/select').then(res => {
				this.novel = res.data;

			});

			this.select();


		}

	});



</script>
</body>
</html>
